<!--
 * @Author: 夏之一周
 * @Date: 2024-05-09 11:09
 * @Description: 
 * @LastEditors: 夏之一周 <https://wudetian.top>
 * @LastEditTime: 2024-05-09 18:42
-->
<template>
  <div class="home">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <Top :mydata="mydata"></Top>
    <Mydata :mydata="mydata"></Mydata>
    <div class="app liucheng">
      <h3>流程</h3>
      <ul>
        <li>
          <img src="" alt="" class="shu" />
          <div class="tou">
            <img src="../../public/images/keep/green.png" alt="" class="dui" />
            <span v-if="!mydata.mysymbol.length">
              {{ mydata.name.substr(-2, 2) }}
            </span>
            <img v-if="mydata.mysymbol.length" :src="mydata.mysymbol" />
          </div>
          <div class="you">
            <span>
              <h4>发起申请</h4>
              <h5>我</h5>
            </span>
            <span>{{ mydata.mytime }}</span>
          </div>
        </li>
        <Process
          :boos="{
            name: mydata.boos1name,
            symbol: mydata.boos1symbol,
            grade: mydata.boos1grade,
            time: mydata.boos1time,
            sign: mydata.boos1sign,
          }"
        ></Process>
        <Copy :monitor="{ name: mydata.monitorname, img: mydata.monitorimg }"></Copy>
      </ul>
    </div>
    <div class="haoshi">
      <img src="../../public/images/keep/shenpi.png" />
      <p>&nbsp;&nbsp;&nbsp;共耗时{{ this.zongtime }},比87.9%的同类申请快</p>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Top from "../components/Top.vue";
import Mydata from "../components/Mydata.vue";
import Process from "../components/Process.vue";
import Copy from "../components/Copy.vue";
import Footer from "../components/Footer.vue";
export default {
  name: "Home",
  components: {
    Top,
    Footer,
    Mydata,
    Process,
    Copy,
  },
  data() {
    return {
      datas: "",
    };
  },
  created() {
    this.mydata = this.$route.params.mydata;
  },
  computed: {
    zongtime() {
      let a1 = this.mydata.mytime.slice(6, 8);
      let b1 = this.mydata.boos1time.slice(6, 8);
      let a2 = this.mydata.mytime.slice(9, 12);
      let b2 = this.mydata.boos1time.slice(9, 12);
      let a = Number(a1 * 60) + Number(a2);
      let b = Number(b1 * 60) + Number(b2);
      let time = b - a;
      time = time < 60 ? time + "分钟" + Math.floor(Math.random() * 60) + "秒" : Math.floor(time / 60) + "小时" + (time - 60) + "分钟";
      return time;
    },
  },
};
</script>

<style>
.home {
  padding-top: 7vh;
  width: 100vw;
  min-height: 100vh;
  background-color: #f8f8f7;
}

.app {
  margin: 1.5vh 0vw;
  padding: 0vh 4vw;
  padding-top: 1vh;
  width: 92vw;
  /* border-radius: 13px; */
  background-color: #fefefe;
  padding-bottom: 1vh;
  overflow-x: hidden;
}
.app > li {
  display: block;
  border-radius: 6px;
  padding: 0.2vh 0;
}

.app > li h4 {
  padding-top: 0.5vh;
  font-size: 1.6vh;
  color: #848b92;
  line-height: 2.6vh;
  font-weight: 400;
}

.app > li h5 {
  font-size: 1.8vh;
  line-height: 2.3vh;
  font-weight: 500;
  color: #23282e;
  padding-right: 5vw;
}

.liucheng h3 {
  line-height: 6vh;
  font-size: 18px;
  font-weight: 500;
}

.liucheng li {
  position: relative;
  display: inline-block;
  margin: 0.3vh 0;
  width: 100%;
  vertical-align: text-top;
  overflow: hidden;
}

.liucheng li .shu {
  z-index: 1;
  position: absolute;
  height: 75%;
  margin-top: 5.5vh;
  left: 3.2vh;
  width: 0.6vw;
  background-color: #e2e4e3;
}

.liucheng li .tou {
  display: inline-block;
  width: 5vh;
  height: 5vh;
  margin-left: 1vh;
  margin-bottom: 2.7vh;
  background-color: #3396fb;
  overflow: hidden;
  border-radius: 7px;
  text-align: center;
  line-height: 5vh;
}

.liucheng li .tou .dui {
  position: absolute;
  left: 4.5vh;
  top: 3.3vh;
  width: 2vh;
  height: 2vh;
}

.liucheng li .tou img {
  width: 100%;
}
li .tou span {
  font-size: 1.5vh;
  color: #f8f8f7;
}

.liucheng li .you {
  display: inline-block;
  vertical-align: top;
  padding-left: 2.5vw;
}

.liucheng li .you span:nth-of-type(2) {
  display: block;
  position: absolute;
  top: -0.2vh;
  right: 0vw;
  color: #707070;
  font-size: 1.6vh;
}

.liucheng li .you span:nth-of-type(1) {
  width: 60vw;
  line-height: 2vh;
}

.liucheng li .you span:nth-of-type(1) h4 {
  font-weight: 400;
  color: #707070;
}

.liucheng li .you span:nth-of-type(1) h5 {
  display: inline-block;
  font-weight: 500;
  line-height: 4vh;
  font-size: 2vh;
}

.liucheng li .you span:nth-of-type(1) h6 {
  display: inline-block;
  color: #6d8baa;
  font-weight: 400;
  padding-left: 1em;
}
.haoshi {
  position: relative;
  margin: 3vh 8vw;
  height: 10vh;
  font-size: 12px;
  margin-bottom: 4vh;
  text-align: center;
  color: #b6b6b6;
}

.haoshi img {
  position: absolute;
  width: 2.4vh;
  top: -0.2vh;
  left: 8vw;
}
</style>
